<template>
    <!-- 使用$route.params.id获取参数id的值 -->
    <!-- <p>电影{{ $route.params.id }}页面</p> -->
    <!-- 使用props获取参数值：Vue Router允许在路由匹配规则中开启props传参 -->
    <p>电影{{ id }}页面</p>
    <!-- 定义一个按钮，用于后退到上一个组件页面 -->
    <button @click="goBack">后退</button>
</template>

<script setup>
// 使用props获取参数值：Vue Router允许在路由匹配规则中开启props传参 
// 使用props接收路由规则中匹配到的参数
const props = defineProps({
  id: String
})
// 编写goBack()方法，调用router.go()方法实现后退效果
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
    // go()方法用于实现前进或后退的效果，其参数表示历史记录中前进或后退的步数，类似于window.history.go()，相应的地址栏也会发生改变。
    // go(1)表示前进一条记录；
    // go(-1)表示后退一条记录
    router.go(-1)
}

</script>
